<!doctype html>
<html>
<head>
	<!-- Basic Page Needs -->
        <meta charset="utf-8">
        <title>AMovie - Booking final</title>
        <meta name="description" content="A Template by Gozha.net">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Gozha.net">
    
    <!-- Mobile Specific Metas-->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="telephone=no" name="format-detection">
    
    <!-- Fonts -->
        <!-- Font awesome - icon font -->
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <!-- Mono font -->
        <link href='http://fonts.useso.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
        <!-- Roboto -->
        <link href='http://fonts.useso.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    
    <!-- Stylesheets -->
    <!-- jQuery UI --> 
        <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">

        <!-- Mobile menu -->
        <link href="css/gozha-nav.css" rel="stylesheet" />
        <!-- Select -->
        <link href="css/external/jquery.selectbox.css" rel="stylesheet" />
    
        <!-- Custom -->
        <link href="css/style.css?v=1" rel="stylesheet" />

        <!-- Modernizr --> 
        <script src="js/external/modernizr.custom.js"></script>
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
    	<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script> 
		<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>		
    <![endif]-->
</head>

<body>
    <div class="wrapper place-wrapper">
        <!-- Banner -->
        

       <!-- Header section -->
			<header class="header-wrapper">
				<div class="container">
					<!-- Logo link-->
					<a href='index.html' class="logo">
						<img alt='logo' src="images/logo.png">
					</a>

					<!-- Main website navigation-->
					<nav id="navigation-box">
						<!-- Toggle for mobile menu mode -->
						<a href="#" id="navigation-toggle">
							<span class="menu-icon">
                            <span class="icon-toggle" role="button" aria-label="Toggle Navigation">
                              <span class="lines"></span>
							</span>
							</span>
						</a>

						<!-- Link navigation -->
						<ul id="navigation">
							<li>
								<span class="sub-nav-toggle plus"></span>
								<a href="#">页面</a>
								<ul>
									<li class="menu__nav-item">
										<a href="movie-page-left.html">电影</a>
									</li>
									<li class="menu__nav-item">
										<a href="movie-list-full.html">电影列表</a>
									</li>
									<li class="menu__nav-item">
										<a href="single-cinema.html">电影院</a>
									</li>
									<li class="menu__nav-item">
										<a href="cinema-list.html">电影院名单</a>
									</li>
									<li class="menu__nav-item">
										<a href="contact.html">联系我们</a>
									</li>
									<li class="menu__nav-item">
										<a href="404.html">404 错误</a>
									</li>
									<li class="menu__nav-item">
										<a href="login.html">登陆</a>
									</li>
								</ul>
							</li>
							
							<li>
								<span class="sub-nav-toggle plus"></span>
								<a href="page-elements.html">预订步骤</a>
								<ul>
									<li class="menu__nav-item">
										<a href="book1.html">预订步骤 1</a>
									</li>
									<li class="menu__nav-item">
										<a href="book2.html">预订步骤 2</a>
									</li>
									<li class="menu__nav-item">
										<a href="book3-buy.html">预订步骤 3 (购买)</a>
									</li>
									<li class="menu__nav-item">
										<a href="book3-reserve.html">预订步骤 3 (预约)</a>
									</li>
									<li class="menu__nav-item">
										<a href="book-final.html">订单</a>
									</li>
								</ul>
							</li>

							<li>
								<span class="sub-nav-toggle plus"></span>
								<a href="#">菜单</a>
								<ul class="mega-menu container">
									<li class="col-md-3 mega-menu__coloum">
										<h4 class="mega-menu__heading">正在热映的电影</h4>
										<ul class="mega-menu__list">
											<li class="mega-menu__nav-item">
												<a href="#">一条狗的使命2</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">千与千寻</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">...</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">...</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">...</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">...</a>
											</li>
										</ul>
									</li>

									<li class="col-md-3 mega-menu__coloum">
										<h4 class="mega-menu__heading">即将结束的电影</h4>
										<ul class="mega-menu__list">
											<li class="mega-menu__nav-item">
												<a href="#">一条狗的使命2</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">千与千寻</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">...</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">...</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">...</a>
											</li>
											<li class="mega-menu__nav-item">
												<a href="#">...</a>
											</li>
										</ul>
									</li>

								</ul>
							</li>
						</ul>
					</nav>

					<!-- Additional header buttons / Auth and direct link to booking-->
					<div class="control-panel">
						<a href="#" class="btn btn--sign login-window">登陆</a>
						<a href="#" class="btn btn--sign login-window">注册</a>
						<a href="#" class="btn btn-md btn--warning btn--book login-window">订票</a>
					</div>

				</div>
			</header>
        
       <!-- Search bar -->
			<div class="search-wrapper">
				<div class="container container--add">
					<form id='search-form' method='get' class="search">
						<input type="text" class="search__field" placeholder="Search">
						<select name="sorting_item" id="search-sort" class="search__sort" tabindex="0">
							<option value="1" selected='selected'>按照标题</option>

						</select>
						<button type='submit' class="btn btn-md btn--danger search__button">搜索一部电影</button>
					</form>
				</div>
			</div>
        
        <!-- Main content -->

        <section class="container">
            <div class="order-container">
                <div class="order">
                    <img class="order__images" alt='' src="images/tickets.png">
                    <p class="order__title">感谢您 <br><span class="order__descript">您已成功买到票</span></p>
                </div>

                <div class="ticket">
                    <div class="ticket-position">
                        <div class="ticket__indecator indecator--pre"><div class="indecator-text pre--text">在线票</div> </div>
                        <div class="ticket__inner">

                            <div class="ticket-secondary">
                                <span class="ticket__item">票号 <strong class="ticket__number">a126bym4</strong></span>
                                <span class="ticket__item ticket__date">25/10/2013</span>
                                <span class="ticket__item ticket__time">17:45</span>
                                <span class="ticket__item">电影: <span class="ticket__cinema">一条狗的使命2</span></span>
                                <span class="ticket__item">大厅: <span class="ticket__hall">1号厅</span></span>
                                <span class="ticket__item ticket__price">价格: <strong class="ticket__cost">$60</strong></span>
                            </div>

                            <div class="ticket-primery">
                                <span class="ticket__item ticket__item--primery ticket__film">电影院<br><strong class="ticket__movie">万达影城</strong></span>
                                <span class="ticket__item ticket__item--primery">座位号: <span class="ticket__place">11F, 12F, 13F</span></span>
                            </div>


                        </div>
                        <div class="ticket__indecator indecator--post"><div class="indecator-text post--text">在线票</div></div>
                    </div>
                </div>

                <div class="ticket-control">
                    <a href="#" class="watchlist list--download">下载</a>
                    <a href="#" class="watchlist list--print">打印</a>
                </div>

            </div>
        </section>
        
        <div class="clearfix"></div>

        <footer class="footer-wrapper">
            <section class="container">
                <div class="col-xs-4 col-md-2 footer-nav">
                    <ul class="nav-link">
                        <li><a href="#" class="nav-link__item">Cities</a></li>
                        <li><a href="movie-list-left.html" class="nav-link__item">Movies</a></li>
                        <li><a href="trailer.html" class="nav-link__item">Trailers</a></li>
                        <li><a href="rates-left.html" class="nav-link__item">Rates</a></li>
                    </ul>
                </div>
                <div class="col-xs-4 col-md-2 footer-nav">
                    <ul class="nav-link">
                        <li><a href="coming-soon.html" class="nav-link__item">Coming soon</a></li>
                        <li><a href="cinema-list.html" class="nav-link__item">Cinemas</a></li>
                        <li><a href="offers.html" class="nav-link__item">Best offers</a></li>
                        <li><a href="news-left.html" class="nav-link__item">News</a></li>
                    </ul>
                </div>
                <div class="col-xs-4 col-md-2 footer-nav">
                    <ul class="nav-link">
                        <li><a href="#" class="nav-link__item">Terms of use</a></li>
                        <li><a href="gallery-four.html" class="nav-link__item">Gallery</a></li>
                        <li><a href="contact.html" class="nav-link__item">Contacts</a></li>
                        <li><a href="page-elements.html" class="nav-link__item">Shortcodes</a></li>
                    </ul>
                </div>
                <div class="col-xs-12 col-md-6">
                    <div class="footer-info">
                        <p class="heading-special--small">A.Movie<br><span class="title-edition">in the social media</span></p>

                        <div class="social">
                            <a href='#' class="social__variant fa fa-facebook"></a>
                            <a href='#' class="social__variant fa fa-twitter"></a>
                            <a href='#' class="social__variant fa fa-vk"></a>
                            <a href='#' class="social__variant fa fa-instagram"></a>
                            <a href='#' class="social__variant fa fa-tumblr"></a>
                            <a href='#' class="social__variant fa fa-pinterest"></a>
                        </div>
                        
                        <div class="clearfix"></div>
                        <p class="copy">&copy; A.Movie, 2013. All rights reserved. Done by Olia Gozha</p>
                    </div>
                </div>
            </section>
        </footer>
    </div>

    <!-- open/close -->
        <div class="overlay overlay-hugeinc">
            
            <section class="container">

                <div class="col-sm-4 col-sm-offset-4">
                    <button type="button" class="overlay-close">Close</button>
                    <form id="login-form" class="login" method='get' novalidate=''>
                        <p class="login__title">sign in <br><span class="login-edition">welcome to A.Movie</span></p>

                        <div class="social social--colored">
                                <a href='#' class="social__variant fa fa-facebook"></a>
                                <a href='#' class="social__variant fa fa-twitter"></a>
                                <a href='#' class="social__variant fa fa-tumblr"></a>
                        </div>

                        <p class="login__tracker">or</p>
                        
                        <div class="field-wrap">
                        <input type='email' placeholder='Email' name='user-email' class="login__input">
                        <input type='password' placeholder='Password' name='user-password' class="login__input">

                        <input type='checkbox' id='#informed' class='login__check styled'>
                        <label for='#informed' class='login__check-info'>remember me</label>
                         </div>
                        
                        <div class="login__control">
                            <button type='submit' class="btn btn-md btn--warning btn--wider">sign in</button>
                            <a href="#" class="login__tracker form__tracker">Forgot password?</a>
                        </div>
                    </form>
                </div>

            </section>
        </div>

	<!-- JavaScript-->
        <!-- jQuery 1.9.1--> 
        <script src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')</script>
        <!-- Migrate --> 
        <script src="js/external/jquery-migrate-1.2.1.min.js"></script>
        <!-- jQuery UI -->
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <!-- Bootstrap 3--> 
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

        <!-- Mobile menu -->
        <script src="js/jquery.mobile.menu.js"></script>
        <!-- Select -->
        <script src="js/external/jquery.selectbox-0.2.min.js"></script>

        <!-- Form element -->
        <script src="js/external/form-element.js"></script>
        <!-- Form validation -->
        <script src="js/form.js"></script>
		
        <!-- Custom -->
        <script src="js/custom.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('.top-scroll').parent().find('.top-scroll').remove();
            });
        </script>

</body>
</html>
